<!-- 一河一策 -->
<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <!-- 搜索 -->
        <el-row>
            <el-col :span="24">
                <div class="search-wrapper">
                    <ul class="search-box">
                        <li> <el-input v-model="listQuery.riverName" placeholder="请输入河流名称"  clearable style="width:150px" class="filter-item" ></el-input>
                        <li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="handSearch">查询</el-button>
                        </li>
                    </ul>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="button-wrapper">
                    <el-button size="mini" type="primary" round @click="openAdd">增加</el-button>
                    <el-button size="mini" type="warning" round  @click="batchEdit(9)">锁定</el-button>
                    <el-button size="mini" type="success" round  @click="batchEdit(0)">解锁</el-button>
                    <el-button size="mini" type="danger" round  @click="batchEdit(-1)">删除</el-button>

                </div>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <el-row>
            <el-col :span="24">
                <div class="data-wrapper">
                    <template v-if="tableData!=null">
                        <el-table ref="multipleTable" :data="tableData"  style="width:100%"
                                   @selection-change="handleSelectionChange">
                            <el-table-column type="selection" label="全选" width="50">
                            </el-table-column>
                            <el-table-column type="index" label="序号" :index="indexMethod">
                            </el-table-column>
                            <el-table-column prop="riverName" label="河流名称" :show-overflow-tooltip="true" width="100">
                            </el-table-column>
                            <el-table-column prop="policyName" label="政策名称" :show-overflow-tooltip="true" width="100">
                            </el-table-column>
                            <el-table-column prop="riverLength"  label="河流长度（米）" :show-overflow-tooltip="true" width="120">
                            </el-table-column>
                            <el-table-column prop="duty" label="河长职责" :show-overflow-tooltip="true" >
                            </el-table-column>
                            <el-table-column prop="target" label="政治目标"  :show-overflow-tooltip="true" >
                            </el-table-column>
                            <el-table-column prop="policyState"  width="100" label="状态"  :formatter="formatState">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" align="center" width="200">
                                <template slot-scope="scope">
                                    <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle @click="handleView(scope.$index, scope.row)"></el-button>
                                    <el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle @click="handleEdit(scope.$index, scope.row)" v-bind:disabled="Boolean(scope.row.policyState)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </el-col>
        </el-row>
        <!-- 底部区域 -->
        <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">
            <!-- 批量导入 -->
            <el-col :span="4">
                <div class="grid-content">
                    <el-button type="primary">批量导入</el-button>
                </div>
            </el-col>
            <!-- 分页 -->
            <el-col :span="20">
                <div class="page-item">
                    <el-pagination background
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page.sync="listQuery.currentPage"
                                   :page-sizes="pageSizes"
                                   :page-size="listQuery.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="dataCount"/>
                </div>
            </el-col>
        </el-row>
        <!-- 弹出窗口区域 -->
        <!--查看弹窗-->
        <el-dialog title=查看 :visible.sync="dialogDetailVisible">
            <el-form v-if="form">
                <el-row :gutter="10">
                    <el-col :span="12">
                        策略名称：{{form.dutyName}}
                    </el-col>
                    <el-col :span="12">
                        河道名称：{{form.riverName}}
                    </el-col>
                    <el-col :span="12">
                        河道等级：{{form.riverLevel}}
                    </el-col>
                    <el-col :span="12">
                        策略类型：{{form.dutyType}}
                    </el-col>
                    <el-col :span="12">
                        政策内容：{{form.dutyNote}}
                    </el-col>
                    <el-col :span="12">
                        河长职责：{{form.duty}}
                    </el-col>
                    <el-col :span="12">
                        政治目标：{{form.target}}
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="dialogDetailVisible = false">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title=" " :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <!-- <el-form :model="form"> -->
                <el-row :gutter="5">
                    <el-col :span="12">
                        <el-form-item label="策略名称" :label-width="formLabelWidth" prop="policyName" >
                            <el-input v-bind:readonly="readonly" v-model="form.policyName" placeholder="请输入" >
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="河流名称" :label-width="formLabelWidth" prop="riverId">
                            <el-select  v-bind:readonly="readonly" v-model="form.riverId" placeholder="请选择">
                                <el-option
                                        v-for="item in riverOptions"
                                        :key="item.riverId"
                                        :label="item.riverName"
                                        :value="item.riverId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">

                    <el-col :span="12">
                        <el-form-item label="策略类型" :label-width="formLabelWidth" prop="policyType">
                            <el-select v-bind:readonly="readonly" v-model="form.policyType" placeholder="请选择">
                                <el-option
                                        v-for="item in policyTypeOptions"
                                        :key="item.dictId"
                                        :label="item.dictName"
                                        :value="item.dictValue"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="5">
                    <el-col :span="22">
                        <el-form-item label="政策内容" :label-width="formLabelWidth" prop="policyNote">
                            <el-input v-bind:readonly="readonly"  type="textarea" v-model="form.policyNote" auto-complete="off" :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="22">
                        <el-form-item  label="河长职责" :label-width="formLabelWidth" prop="duty">
                            <el-input  v-bind:readonly="readonly" type="textarea" v-model="form.duty" auto-complete="off" :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="5">
                    <el-col :span="22">
                        <el-form-item label="政治目标" :label-width="formLabelWidth" prop="target">
                            <el-input v-bind:readonly="readonly"  type="textarea" v-model="form.target" auto-complete="off" :autosize="{ minRows: 5, maxRows: 8}"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
                <el-button v-if="!readonly" size="medium" type="primary" @click="submitForm('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //表格全局参数
                tableData: null,
                //默认数据总数
                dataCount: 100,
                pageSizes: [5, 10, 20, 30, 40],
                //批量选中参数
                //多选的值
                listSelect: [],
                //分页参数
                //搜索框参数
                searchInput: "",
                //搜索。axios发送的参数
                listQuery: {
                    currentPage: 1,
                    pageSize: 10,

                },
                //弹框的数据是否可编辑
                readonly: true,
                value: "", //
                //页面加载
                loading: false,
                //  填表检查
                rules: {
                    policyName: [
                        { required: true, message: "请输入策略名", trigger: "blur" }
                    ],
                    policyNote: [
                        { required: true, message: "请输入政策内容", trigger: "blur" }
                        //{ validator: validateLoginName, trigger: "blur" }
                    ],
                    duty: [
                        { required: true, message: "请输入职责", trigger: "blur" }
                        //{ validator: validatePass, trigger: "blur" }
                    ],
                    target: [
                        {
                            required: true,message: "请输入目标", trigger: "blur"
                        }
                    ],
                },
                //弹层显示开关
                dialogFormVisible: false,
                //查看
                dialogDetailVisible:false,
                //弹层表单数据
                form: {},
                //修改和查看弹层表单数据
                //获取当前行信息
                //oneCol
                //rowData: {},
                //弹层宽度
                formLabelWidth: "100px",
                // 河流下拉选项
                riverOptions: [
                    {
                        value: "Leanne Graham",
                        label: "Leanne Graham"
                    }
                ],
                //策略类型下拉
               policyTypeOptions:[],

            };
        },
        mounted() {
            // 初始化页面
            this.postList();

        },

        updated() {},
        destroyed() {},
        methods: {
            //获取策略类型下拉
            getTypeOptions(){
                //获取策略类型
                this.getDictionary({types:["POLICY_TYPE"]}).then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.policyTypeOptions = data.data["POLICY_TYPE"];
                    console.log(this.policyTypeOptions)
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            },
            //河流名称下拉
            getRiverName() {
                this.loading = true;
                var regId=JSON.parse(window.localStorage.getItem('user')).value.regId.code;
                this.getRequest("/api/rcs/getRiversByRegId",regId)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.riverOptions = data.data;
                    console.log("regId"+regId)
                } else {
                    alert(data.msg);
                }
                this.loading = false;
            })
            .catch(error => {
                    //错误信息
                    console.log(error);
            });
            },
            // 状态翻译
            formatState: function(row, column) {
                return row.policyState == 0 ? "可用" : "已锁定";
            },

            //列表查询/刷新
            postList() {
                this.loading = true;
                this.postRequest("/api/rcs/listPolicys", this.listQuery)
                    .then(res => {
                    var data = res.data;
                if (data.status == 200) {
                    this.tableData = data.data;

                    this.dataCount = data.count;
                } else {
                    alert(data.msg);
                }
                this.loading = false;
            })
            .catch(error => {
                    //错误信息
                    console.log(error);
            });
            },

            //搜索功能
            handSearch() {
                this.postList();
            },
            //增加操作
            openAdd() {
                this.readonly = false;
                this.form = {};
                this.getRiverName();
                this.getTypeOptions();
                this.dialogFormVisible = true;
            },
            //查看操作
            handleView(index, row) {
                this.readonly = true;
                this.form = row;
                this.dialogDetailVisible = true;
            },
            //编辑操作
            handleEdit(index, row) {
                this.readonly = false;
                this.form = row;
                this.dialogFormVisible = true;
            },
            //添加或修改提交
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.postRequest("/api/rcs/updateInsert", this.form)
                            .then(res => {
                            this.loading = true;
                        var data = res.data;
                        if (data.status == 200) {
                            this.$message.success(data.msg);
                            this.dialogFormVisible = false;
                            this.postList();
                            this.form = {};
                        } else {
                            this.$message.error(data.msg);
                        }
                        this.loading = false;
                    })
                    .catch(error => {
                            //错误信息
                            this.$message.error(error);
                    });
                    } else {
                        this.$message.error("请填写正确内容");
                return false;
            }
            });
            },
            //批量操作
            //批量编辑
            batchEdit(val) {
                if (this.listSelect.length <= 0) {
                    this.$message.warning("请选择一条数据");
                    return;
                }
                var strArr = [];
                for (var i = 0; i < this.listSelect.length; i++) {
                    strArr.push(this.listSelect[i].policyId);
                }
                //前面三个参数分别是 表名，状态字段名，id字段名
                //status 为状态值 （0：正常  9：锁定 -1：删除）
                //ids 为需要批量操作的 id数组
                var submitData = {
                    tableName: "b_policy",
                    tableCol: "policy_state",
                    tableId: "policy_id",
                    status: val,
                    ids: strArr
                };
                this.$confirm("确认批量操作？").then(_ => {
                    this.putRequest("/api/common/batch", submitData)
                    .then(res => {

                    var data = res.data;
                if (data.status == 200) {
                    this.$message.success(data.msg);
                    this.postList();
                } else {
                    this.$message.error(data.msg);
                }
            })
            .catch(error => {
                    //错误信息
                    this.$message.error(error);
            });
            });
            },
            //多选,点击选框时
            handleSelectionChange(val) {
                var self = this;
                self.listSelect = val; //多选的参数
            },
            indexMethod(index) {
                return (
                    index + 1 + (this.listQuery.currentPage - 1) * this.listQuery.pageSize
                );
            },
            //每页个数改变
            handleSizeChange(size) {
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.postList();
            },
            //当前页改变
            handleCurrentChange(currentPage) {
                this.listQuery.currentPage = currentPage;
                this.postList();
            }
        }
    };
</script>
<style scoped>
</style>